<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3transform效果</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div id="wrapper">
        <figure>
            <img src="img/pic1.jpg" alt="">
            <figcaption>
                <h3>平移动画1</h3>
                <p>
                    这是简单的平移动画
                </p>
            </figcaption>
        </figure>
        <figure>
            <img src="img/pic2.jpg" alt="">
            <figcaption>
                <h3>平移动画2</h3>
                <p> 这是简单的平移动画1</p>
                <p> 这是简单的平移动画2</p>
                <p> 这是简单的平移动画3</p>
            </figcaption>
        </figure>
        <figure>
            <img src="img/pic3.jpg" alt="">
            <figcaption>
                <h3>平移动画3</h3>
                <p>CSS3动画很强大！<br>这里是很多很多的文字啊............</p>
            </figcaption>
        </figure>
        <figure>
            <img src="img/pic4.jpg" alt="">
            <figcaption>
                <h3>旋转动画1</h3>
                <p>旋转</p>
                <div></div>
            </figcaption>
        </figure>
        <figure>
            <img src="img/pic5.jpg" alt="">
            <figcaption>
                <h3>旋转动画2</h3>
                <div></div>
                <p>
                    通过旋转+平移实现飞入飞出
                </p>
            </figcaption>
        </figure>
        <figure>
            <img src="img/pic6.jpg" alt="">
            <figcaption>
                 <h2>拉伸动画</h2>
                <p>通过拉伸skew实现动画效果<br>拉伸90deg那是一条线看不到</p>
            </figcaption>
        </figure>
        <figure>
            <img src="img/pic7.jpg" alt="">
            <figcaption>
                <h3>缩放动画</h3>
                <div></div>
                <p>
                    通过scale实现动画缩放
                </p>
            </figcaption>
        </figure>
        <figure>
            <img src="img/pic8.jpg" alt="">
            <figcaption>
                <h3>旋转动画</h3>
                <div></div>
                <div></div>
                <p>
                    通过scale放大
                </p>
            </figcaption>
        </figure>
        <figure>
            <img src="img/pic9.jpg" alt="">
            <figcaption>
                <h3>平移动画1</h3>
                <p>
                    这是简单的平移动画
                </p>
            </figcaption>
        </figure>
    </div>
</body>
</html>